<template>
	<view class="">
			<view class="back ">
					<image class="backimg" :src="baseUrl + '/static/icon/left_jt.png'" mode="aspectFill" @click="goBack">
					</image>
					
				</view>
		<view class="top">
			<image
				src="https://images.fudiemall.com/storage/default/20250628/redtop7951620fe8a4f5e16836d773b98faa4a76d3f3ca.png"
				mode="aspectFill"></image>
		</view>
		<view class="main">
			<view class="maintop">
				<image class="headimg" :src="info.user.avatar" mode="aspectFill"></image>
				<view class="name">
					{{info.name}}
				</view>
				<image class="tag"  v-if="info.type_red==1"
					src="https://images.fudiemall.com/storage/default/20250627/pin06b91c8d9ca48e37e4191523462c1d5d4aee193c.png"
					mode="aspectFill"></image>
			</view>
			<view class="content">
				{{info.remark}}
			</view>
			<view class="BoxMoney" v-if="info.user_more_amount!=''">
				<image src="https://images.fudiemall.com/storage/default/20250627/moresssa41fd2f340c5e4a85a27a5a70315149a158a155b.png" mode="aspectFill"></image>
				<text>{{info.user_more_amount}}</text>
			</view>
			<view class="tips" @click="goredIndex" v-if="info.user_more_amount!=''">
				<text>已存入More券余额，点击查看红包记录</text>
				 <u-icon name="arrow-right"  color="#EBCD99" size="16"></u-icon>
			</view>
			<view class="bot" v-if="info.status==0">
				还有{{info.rob_number}}/{{info.number}}个红包
			</view>
			<view class="bot" v-if="info.status==1">
				{{info.number}}个红包共{{info.more_amount}}More券，{{info.duration}}被抢光
			</view>
			<view class="bot" v-if="info.status==2">
				该红包已过期。已领取{{info.rob_number}}/{{info.number}}个，共{{info.rob_more_amount}}/{{info.more_amount}}。未领取More劵已返还
		
			</view>
		</view>
	
		<view class="lists">
			<view class="listsitem" v-for="item in info.record" :key="item.id">
			<view class="sss">
				<image class="headimg1"  :src="item.user.avatar" mode="aspectFill"></image>
				<view class="listsitems">
					<view style="display: flex;justify-content: flex-start;align-items: center;">
						<view class="name">
							{{item.user.nickname}}
						</view>
						<image class="tagd"  v-if="item.is_newer==1" src="https://images.fudiemall.com/storage/default/20250628/xinfen7a3c9488ee2050a9274e02fc0f325f3b9f6e7c5c.png" mode="aspectFill"></image>
					</view>
					<view class="time">
						{{item.create_time}}
					</view>
				</view>
			</view>
				<view class="ssssss">
					<view class="moneywrap">
						<image class="tag4" src="https://images.fudiemall.com/storage/default/20250628/heimore6016662051141b8a04669e79e196ccaee3c51fa4.png" mode="aspectFill"></image>
						<text>{{item.more_amount}}</text>
					</view>
					<image  v-if="item.is_best==1" class="shouqi" src="https://images.fudiemall.com/storage/default/20250630/shouqizuijiac0f7c466688ed3a35da1629711635b283feb0e8b.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="empty3">
			
		</view>
		<view class="empty3">
			
		</view>
		
	
		<view class="btnwrap">
			<view class="btn2" @click="goredIndex">
				查看红包记录
			</view>
			<view class="btn1" @click="goredIndex">
				我也要发红包
			</view>
			
		</view>
	</view>
</template>

<script>
	import wx from 'weixin-js-sdk';
	import  {  detail } from "../../api/red.js"
	import {wxConfig} from"../../api/other.js"
	import { getEnv } from "../../utils/common.js"
	export default{
		data(){
			return{
				tipShow:false,
				id:"",
				info:{
					user:{}
					
				},
				env:"",
				baseUrl: this.$imageBaseUrl,
			}
		},
		onLoad(e) {
			this.id=e.id
			this.getdetail()
			this.env=getEnv()
			console.log(this.env)
			if(this.env=="微信内置浏览器"){
				this.getwxconfig()
			}
			// #ifdef MP-ALIPAY ||  MP-WEIXIN
			uni.hideShareMenu()
			// #endif
		},
		
		methods:{
			getwxconfig() {
				wxConfig({
					
				}).then(res => {
					wx.config({
						debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: [
						] // 必填，需要使用的 JS 接口列表
					});
					wx.ready(() => {
						 wx.hideOptionMenu();
						console.log("准备好了")
					});
				})
			},
			goredIndex(){
				uni.navigateTo({
					url:"/pageUser/redEnvelope/redEnvelope"
				})
			},
			getdetail(){
				detail({
					red_id:this.id
				}).then(res=>{
					this.info=res.data
				})
			},
					goBack() {
							const canNavBack = getCurrentPages()
							console.log(canNavBack.length);
							// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
							if (canNavBack.length > 1) {
								uni.navigateBack({
									delta: 1
								})
							} else {
								uni.switchTab({
									url: '/pages/index/cloudCatIndex'
								})
							}
						},
		}
	}
</script>

<style lang="scss">
	
	.top {
		width: 750rpx;
		height: 208rpx;

		>image {
			width: 750rpx;
			height: 208rpx;
		}
	}
	.BoxMoney{
		width: 750rpx;
		display: flex;
		align-items: center;
		margin: 0 auto;
		justify-content: center;
		margin-top: 32rpx;
		>image{
			width: 64rpx;
			height: 58rpx;
		}
		>text{
			font-weight: 500;
			font-size: 88rpx;
			color: #CDAD74;
			margin-left: 20rpx;
		}
	}
	.lists{
		width: 690rpx;
		margin: 0 auto;
	}
	.listsitem{
		
		
	}
	.headimg1{
		width: 92rpx;
		height: 92rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}
	
	.bot{
		width: 690rpx;
		margin:  0 auto;
		border-bottom: 2rpx solid #E5E5E5;
		padding-bottom: 20rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		margin-top: 40rpx;
	}
	.content{
		width: 750rpx;
		text-align: center;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		margin-top: 28rpx;
	}
	.tag {
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;

	}

	.main {
		width: 750rpx;
		min-height: 288rpx;

	}

	.maintop {
		width: 750rpx;
		margin-top: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.headimg {
		width: 56rpx;
		height: 56rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
	.listsitem{
		display: flex;
		justify-content: space-between;
		// height: 174rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #E5E5E5;
		padding-top: 30rpx;
	}
	.listsitems{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.sss{
		display: flex;
	}
	.name {
		max-width: 300rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		margin-left: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.tagd{
		width: 56rpx;
		height: 30rpx;
		margin-left: 10rpx;
		
	}
	.moneywrap{
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		>text{
			font-weight: 500;
			font-size: 30rpx;
			color: #3D3D3D;
			margin-left: 10rpx;
		}
	}
	.tag4{
		width: 24rpx;
		height: 24rpx;
	}
	.time{
		font-weight: 400;
		font-size: 30rpx;
		color: #999999;
		margin-left: 24rpx;
	}
	.btnwrap{
		width: 750rpx;
		height: 106rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		display: flex;
		
		justify-content: space-around;
		align-items: center;
	}
	.btn1{
	width: 300rpx;
	height: 80rpx;
		background: #FF5959;
		border-radius: 190rpx 190rpx 190rpx 190rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.btn2{
		width: 300rpx;
		height: 80rpx;
		border-radius: 190rpx 190rpx 190rpx 190rpx;
		border: 2rpx solid #FF5959;
		text-align: center;
		line-height: 80rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FF5959;
	}
	.tipss{
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
	}
	.boxsd{
		width: 750rpx;
		display: flex;
		height: 100vh;
		>image{
			margin: 0 auto;
			width: 560rpx;
			height: 764rpx;
		}
	}
	.tips{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		text-align: center;
		// height: 40rpx;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: 400;
		font-size: 28rpx;
		color: #CDAD74;
	margin-top: 24rpx;
	}
		.ssssss{
			display: flex;
			flex-direction: column;
			align-items: center;
			
		}
		.shouqi{
			width: 158rpx;
			height: 44rpx;
			margin-left: 20rpx;
		}
			.backimg {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				width: 60rpx;
				height: 60rpx;
			}
		
			.shareimg {
				position: absolute;
				top: 50%;
				right: 40rpx;
				transform: translateY(-50%);
				width: 60rpx;
				height: 60rpx;
			}
		
			.back {
				position: fixed;
				/* #ifdef MP-WEIXIN||MP-ALIPAY */
				top: 88rpx;
				/* #endif */
				/* #ifdef H5 */
				top: 40rpx;
				/* #endif */
				left: 20rpx;
				width: 100%;
				height: 88rpx;
				z-index: 999;
			}

</style>